from nicegui import ui
import userlogin


def on_log(input1=None, input2=None):
    dict = userlogin.if_have_user(input1.value,input2.value)
    print(input1.value,input2.value)
    if dict['if_have']:
        ui.notify('登录成功')


def main():
    # log ui
    img = ui.image('/assets/login-bg.jpg').props("absolute-top text-center").tailwind('h-screen')
    # with ui.image("img\991138.jpg").props("center no-repeat"):
    with ui.label('').classes("absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"):
        # 使用网格布局才能使text-center生效
        with ui.grid():
            label1 = ui.label('欢迎访问！').tailwind("text-center text-2xl text-dark my-2")
            # 发现一个问题，使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
            # 样式的作用，而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
            # input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
            input1 = ui.input('账号/邮箱').props("outlined").style(
                'color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
            input2 = ui.input('密码', password=True).props("outlined").style('padding-left: 2.5rem;padding-right: 2.5rem;')
            # 'gap:10em'是CSS中的一种属性值，用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
            # 这个属性通常用于布局调整，可以在水平或垂直方向上增加或减少元素之间的间距。
            with ui.row().style('gap:12em'):
                link1 = ui.link('忘记密码').tailwind('ml-10 w-1/3 text-left')
                link2 = ui.link('注册账号').tailwind('ml-9 text-right')
                # 单个空间用mx
            button1 = ui.button('登录', on_click=on_log).tailwind('mx-10 my-3')
    # label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')
    ui.run()

main()